@import '../../global.less';

.view {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  width: 100%;
  height: 100vh;
  background: linear-gradient(180deg, #daecf6 0%, #eff0f0 100%);

  .footer:extend(.flex-column) {
    margin-top: 48rpx;
    justify-content: center;
    align-items: center;

    .cloneBox {
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      margin-top: 24rpx;

      .cloneTips {
        color: rgba(0, 0, 0, 0.5);
        font-size: 28rpx;
        height: 40rpx;
        line-height: 40rpx;
      }

      .cloneNumber {
        color: @theme-color;
      }
    }
  }

  .recordingTextBox:extend(.flex-column) {
    width: 620rpx;
    height: auto;
    max-height: 700rpx;
    padding: 48rpx;
    border-radius: 32rpx;
    align-items: center;
    box-shadow: 0px 16px 25px -10px rgba(13, 72, 161, 0.35);
    background: linear-gradient(180deg, #3384ff 0%, #4d94ff 100%);
    margin-top: 40rpx;
    margin-bottom: 44rpx;
    overflow-y: auto;

    .recordingTips {
      white-space: normal;
      width: 524rpx;
      font-size: 32rpx;
      line-height: 44rpx;
      color: #ffffff;
      opacity: 0.5;
      font-weight: 500;
      margin-bottom: 48rpx;
      text-align: left;
    }

    .recordingText {
      white-space: normal;
      width: 524rpx;
      font-size: 36rpx;
      line-height: 56rpx;
      color: #ffffff;
      font-weight: 600;
      text-align: left;
    }
  }

  .resTextBox:extend(.flex-row) {
    width: 620rpx;
    height: auto;
    min-height: 80rpx;
    border-radius: 24rpx;
    justify-content: center;
    align-items: center;
    background-color: rgba(241, 94, 94, 0.1);

    .iconImage {
      width: 32rpx;
      height: 32rpx;
      margin-right: 8rpx;
    }

    .resText {
      font-size: 24rpx;
      line-height: 32rpx;
      height: auto;
      white-space: normal;
      color: #f04c4c;
    }
  }

  .singleWay:extend(.flex-column) {
    width: 686rpx;
    height: 256rpx;
    background: linear-gradient(180deg, #3384ff 0%, #4d94ff 100%);
    box-shadow: 0px 16px 25px -10px rgba(13, 72, 161, 0.35);
    border-radius: 32rpx;
    padding: 36rpx 36rpx 20rpx 36rpx;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 32rpx;
    margin-top: 80rpx;

    .singleText {
      width: 100%;
      font-size: 28rpx;
      color: #ffffff;
      text-align: left;
      margin-bottom: 20rpx;
      font-weight: 500;
    }

    .singleImage {
      width: 524rpx;
      height: 132rpx;
    }
  }
}

.btnBox:extend(.flex-row) {
  justify-content: space-between;
  align-items: center;
}

.btn {
  transition: transform 1s; /* 设置旋转的过渡效果 */

  .btnImage {
    width: 160rpx;
    height: 160rpx;
  }
}

.active {
  animation: rotation 1s infinite linear; /* 添加旋转动画 */
}

@keyframes rotation {
  from {
    transform: rotate(0deg); /* 从0度开始 */
  }
  to {
    transform: rotate(360deg); /* 旋转到360度 */
  }
}
